<%@ page session="true" isELIgnored="false" %> <%@ taglib prefix="c"
uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="form"
uri="http://www.springframework.org/tags/form" %>



<script type="text/javascript">
var myallies=[];
var alliesSelected=[];
var giftsSelected=[];
var igiftsSelected=[];
//var fbtoken="${fbtoken}";
var giftIndex=-1;
var giftID=-1;


			function createAlliesScreen()
			{
				
			
				$.getJSON("https://api.facebook.com/method/fql.query?query=SELECT uid, name, pic_square FROM user WHERE uid IN (SELECT uid2 FROM friend WHERE uid1=${moi}) AND is_app_user &callback=?&format=JSON&access_token="+fbtoken, function(rtnmsg) 
				{	
					if(null==rtnmsg)
					{
						jAlert("Connection to facebook failed! Please refresh your page","Unable to connect");
								return;
					}
					var i=0;
					for(var x in rtnmsg)
						{
						var xname = rtnmsg[x].name;
						if(typeof xname === 'undefined' || !xname)
						{
							continue;
						}
						i++;
						var uid=rtnmsg[x].uid;
						var pic_square=rtnmsg[x].pic_square;
						
				var scstring= "<li class='ui-state-default' title='"+uid+"'><img  width=80 height=80 src='"+pic_square+"'> <br> "+xname +" </li> ";
				$("#alliescarousel").append(scstring);
						}
					
					$("#alliesloading").attr("style","display:none");
					
					if(i==0)
					{
					$("#noallies").attr("style","display:block");
					}
				
					
					});
				
			}
		
			  
			(function () {
			showMiniLoading();
			 buildAlliesCarousel();
			$('#alliestabs').tabs();
			
			
				
				$('#acptgiftsbtn').bind('click', function(event) {
					
					if(giftsSelected.length<1)
					{
					jAlert("Select the gifts you want to accept. <br> Control + click or click and drag to select multiple gifts","No gifts selected");
					return;
					}
				//iterate thru alliesSelected and send them the gift!
					$.post("gifts/accept", {
					gifts:giftsSelected.join("/")
}, function(rtnmsg) {
	
	if(rtnmsg["status"]!="+OK")
	{
	jAlert("All your gifts could not be redeemed. Some of them have expired " + rtnmsg["code"],"Gifts redeemed");
	}
	else
		{
		jAlert("All your gifts have been redeemed and will be added to your inventory soon " ,"All gifts redeemed");
		}
	var i=0;
	for(i=0;i<igiftsSelected.length;i++)
		{
		$('#giftcarousel li:eq('+igiftsSelected[i]+')').remove();
		}
	giftsSelected=[];
	igiftsSelected=[];
	syncMilServer();
	syncServer();
	

});	
					
				});
				
				$('#sendgiftsbtn').bind('click', function(event) {
					try{
					if(parseInt(giftID)<0 || isNaN(giftID) )
						{
						jAlert("Select a gift to send to your friends! <br>Click on any gift to select that gift","No gifts selected");
						return;
						}
					if(alliesSelected.length<1)
						{
						jAlert("Select the allies you want to send the gifts to. <br> Press Control/Command and click or click and drag to select multiple allies","No Allies Selected!");
						return;
						}
					//iterate thru alliesSelected and send them the gift!
						$.post("gifts/send", {
						giftid:giftID,
						persons:alliesSelected.join("/")
	}, function(rtnmsg) {
		if(rtnmsg==null)return;
		if(rtnmsg.status=="+OK")
			{
			var iter=0;
			jConfirm('<img src="images/feeds/gifts.png"> <br> <br>Would you like to inform  your friend about your gifts?', 'Inform your friend', function(r) {
			    if(r===true)
			    	{
			    	for(iter=0;iter<alliesSelected.length;iter++)
					{
				var imgsrc=$('#sendgiftscarousel li:eq('+giftIndex+') >img').attr("src");
				if(!imgsrc)
					{
					imgsrc="http://global-dominator.appspot.com/images/feeds/gifts.png"
					}
				publishPost(alliesSelected[iter],'I have sent you gift on Global Domination!','Accept Gift','You can use this gift to expand your territory, build an army or for scientific research.You can login to the game and accept it in the allies screen',imgsrc);
				
				}
			    	}
			});
			
			
			
			
			}
		
	});	
					//remove the gift from UI and backend!
					$('#sendgiftscarousel li:eq('+giftIndex+')').remove();
					giftID=-1;
					giftIndex=-1;
				}
				catch(err)
				{
					
				}
					
				});
				
				//createFriendsScreen();
				hideMiniLoading();
		    })();
		
		
		
		function buildAlliesCarousel()
		{
		
		createAlliesScreen();
			 <c:forEach items="${gifts}" var="gift">
			 $("#sendgiftscarousel").append("<li class='ui-state-default' title='${gift.id}'> " + costhumb[${gift.giftItem}]+" <br> <span class='amount'>${gift.giftAmount}</span> </li>");
			  </c:forEach> 
			  
		 $("#sendgiftscarousel").selectable({
                stop: function(e, ui) {
                    $(".ui-selected:first", this).each(function() {
                        $(this).siblings().removeClass("ui-selected");
                        //find out the selected gift
                    });
                    
                    $('#sendgiftscarousel .ui-selected').each(function(){
                    	try{
                  	  giftID= parseInt(this.title);
                  	giftIndex = $("#sendgiftscarousel li").index(this);
                    	}
                    	catch(err)
                    	{
                    		giftID=-1;
                    	}
                  	  });
                    
					}
					});
	
	
	
		$("#alliescarousel").selectable({
                stop: function(e, ui) {
                  // find out all the selected people
                alliesSelected=[];
                  $('#alliescarousel .ui-selected').each(function(){
                    	  alliesSelected.push(this.title);
                    });
                  alliesSelected=jQuery.unique(alliesSelected);// Bug in FF 3.5. Jquery returns duplicate items
					}
		});
		
			

		
		

	 <c:forEach items="${mygifts}" var="gift">
	 $("#giftcarousel").append("<li class='ui-state-default' title='${gift.id}'> <img src='https://graph.facebook.com/<c:out value='${gift.giftSender}'/>/picture?type=square'/> gifted you " + costhumb[${gift.giftItem}]+"  <span class='amount'>${gift.giftAmount}</span> </li>");
	 </c:forEach> 
	  
	  
	$("#giftcarousel").selectable({
          stop: function(e, ui) {
            // find out all the selected gifts
             giftsSelected=[];
            $('#giftcarousel .ui-selected').each(function(){
            giftsSelected.push(this.title);
            igiftsSelected.push($("#giftcarousel li").index(this))
            });
           giftsSelected=jQuery.unique(giftsSelected);// Bug in FF 3.5. Jquery returns duplicate items
           igiftsSelected=jQuery.unique(igiftsSelected);// Bug in FF 3.5. Jquery returns duplicate items
          }
			});
		
	if($("#giftcarousel > li").size() <1)
	{
	$("#nogifts").attr("style","display:block")
	}

	
		}
	
</script>
<style type="text/css">
.xbutton {
	width: 150px;
	height: 50px
}

.clearbutton {
	width: 100px;
	height: 25px
}

.mselectcarousel  .ui-selecting { background: #FECA40; }
	.mselectcarousel .ui-selected { background: #F39814; color: white; }
	.mselectcarousel  { list-style-type: none; margin: 0; padding: 0; }
	.mselectcarousel  li { margin: 2px; padding: 0px; float: left; width: 70px; height: 80px; font-size:1em; text-align: center; }

	#friendscarousel  .ui-selecting { background: #FECA40; }
	#friendscarousel .ui-selected { background: #F39814; color: white; }
	#friendscarousel  { list-style-type: none; margin: 0; padding: 0; }
	#friendscarousel  li { margin: 3px; padding: 1px; float: left; width: 100px; height: 100px; font-size:1em; text-align: center; }

	
	#alliescarousel  .ui-selecting { background: #FECA40; }
	#alliescarousel .ui-selected { background: #F39814; color: white; }
	#alliescarousel  { list-style-type: none; margin: 0; padding: 0; }
	#alliescarousel  li { margin: 3px; padding: 1px; float: left; width: 120px; height: 120px; font-size:1em; text-align: center; }

	
	#giftcarousel .ui-selecting { background: #FECA40; }
	#giftcarousel .ui-selected { background: #F39814; color: white; }
	#giftcarousel { list-style-type: none; margin: 0; padding: 0; width: 80%; }
	#giftcarousel li { margin: 3px; padding: 0.4em; font-size: 1.4em; height:50px; }

</style>



<div id="alliestabs">
 <ul>
     
        <li>
            <a href="#acontainer">My Allies</a>
        </li>
        
      <li>
            <a href="#giftcontainer">Gifts for me</a>
        </li>
        
        <!--li>
            <a href="#fcontainer">Invite Friends</a>
        </li-->
    </ul>
 <div id="acontainer">   
 <p align="right">
<button class="xbutton" id="sendgiftsbtn"> Send Gifts </button>
</p>
 <table width="100%">
<tr><td width="30%" valign="top">

<div id="sendgiftscontainer" >

<ol id="sendgiftscarousel" class="mselectcarousel">


</ol>
</div>


 </td>
<td width="70%" valign="top">

<div id="alliescontainer" >

<ol id="alliescarousel">
 
</ol>
<div id="alliesloading">
<img src="images/loading.gif">
</div>
<div id="noallies" style="display:none" class="mesg">
You have no allies. Click on "Invite Friends" tab and invite your friends to become your allies.<br>
Allies strengthen your military, gift you daily resources and increases the amount of gift you can give others.
</div>
</div>
</td></tr></table>

</div>



 
<div id="giftcontainer" class="yui-skin-sam">

<ol id="giftcarousel">



</ol>
<div id="nogifts" style="display:none" class="mesg">
You have no gifts! Ask your friends to send you some gifts. Each friend can send limited amount of gifts everyday <br>
</div>
<button class="xbutton" id="acptgiftsbtn"> Accept Gifts </button>

</div>

<!--div id="fcontainer">
<div id="friendscontainer">


<ol id="friendscarousel">

</ol>

<div id="nofriends" style="display:none">
You have no Friends! Kip Drordy, is that you? <br>
</div>
</div>
<br>

<button class="xbutton" id="invitebutton">Invite</button>

</div-->
</div>







